<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <template v-for="item in feeList">
        <el-tab-pane :key="item.code" :name="item.code" :label="item.name">
          <component :is="item.component" v-if="item.code === activeName" />
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import accommodation from './accommodation.vue';
import memberFee from './memberFee.vue';
import otherFee from './otherFee.vue';
export default {
  data () {
    return {
      activeName: 'memberFee',
      feeList: [
        {
          code: 'accommodation',
          name: '食宿设置',
          component: accommodation
        },
        {
          code: 'memberFee',
          name: '会员费用',
          component: memberFee
        },
        {
          code: 'otherFee',
          name: '其他费用',
          component: otherFee
        }
      ]
    };
  },
  methods: {
    handleTabClick(tabItem) {
      this.activeName = tabItem.paneName;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
